<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>《崩坏3》——达内私服公测开启！</title>
    <link id="icon" rel="shortcut icon" href="https://bh3.mihoyo.com/favicon.ico">
    <style>
        body {
            position: relative;
            margin: 0;
            padding: 0;
        }

        /*方奥*/
        #d1 {
            position: absolute;
            width: 1920px;
            height: 5000px;
            top: 750px;
            font-size: 72.9167px;
            z-index: 1;
        }

        #d_id {
            position: relative;
        }

        #d2 {
            position: absolute;
            width: 1920px;
            height: 1080px;
        }

        #d3 {
            /*float: right;*/
            position: absolute;
            width: 98px;
            height: 125px;
            padding-left: 1650px;
            top: 57px;
            z-index: 2;
            /*overflow: hidden;*/
        }

        #d4 {
            position: relative;
            padding-top: 130px;
            padding-left: 150px;
            width: 156px;
            height: 105px;
            left: 20px;
            bottom: 57px;
            z-index: 3;
        }

        #d5 {
            position: absolute;
            width: 813px;
            height: 449px;
            padding-top: 430px;
            padding-left: 250px;
        }

        #d6 {
            position: absolute;
            margin-top: 600px;
            padding-left: 250px;
            z-index: 2;
        }

        #d7 {
            position: absolute;
            margin-top: 600px;
            padding-left: 750px;
            z-index: 2;
        }

        #d8 {
            position: absolute;
            margin-top: 835px;
            padding-left:610px;
            z-index: 2;
        }

        /*吕森森*/
        /*福利页面*/
        #b_f_div {
            /*border: 1px solid red;*/
            margin-top: 960px;
            width: 1920px;
            height: 1080px;
            z-index: 2;
            position: absolute;
        }

        #f_1 {
            margin-top: 100px;
        }

        #f_2 {
            position: absolute;
            top: 38px;
            left: 20px;
        }

        #f_3 {
            position: relative;
            bottom: 250px;
            left: 20px;
        }

        #b_f_div > div {
            /*border: 1px solid red;*/
            width: 1046px;
            height: 495px;
            position: absolute;
            top: 200px;
            left: 450px;
        }

        img {
            transition-duration: 1s
        }

        #b_f_div > div > img:hover {
            transform: scale(1.1);
        }

        #b_f_div > div > img {
            margin-left: 19.825px;
        }

        /*全新服饰*/
        #b_q_div {
            /*border: 1px solid blue;*/
            margin-top: 2040px;
            width: 1920px;
            height: 1080px;
            z-index: 2;
            position: absolute;
        }

        /*全新服饰*/
        #b_b_div {
            /*border: 1px solid blue;*/
            margin-top: 3120px;
            width: 1920px;
            height: 1080px;
            z-index: 2;
            position: absolute;
        }


        /*李天波*/
        #b_y_div {
            /*border: 1px solid blue;*/
            margin-top: 4200px;
            width: 1920px;
            height: 1080px;
            z-index: 2;
            position: absolute;
        }

        body > img {
            width: 50%;
            height: 50%;

        }


        .slideshow-container {
            position: relative;
            text-align: center;
            width: 100%;
            height: 1000px; /* 设置轮播图容器的高度 */
            overflow: hidden;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* 默认隐藏所有幻灯片 */
            transition: opacity 1s ease; /* 设置渐变效果的过渡时间和缓动函数 */
        }

        /*.slide.active {*/
        /*    opacity: 1; !* 显示当前幻灯片 *!*/
        /*}*/

        /* 设置幻灯片切换动画 */
        @keyframes slideshow {
            0% {
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            33.33% {
                opacity: 1;
            }
            53.33% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }

        /* 为每个幻灯片设置不同的动画延迟时间 */
        .slide:nth-child(1) {
            animation: slideshow 10s infinite;
        }

        .slide:nth-child(2) {
            animation: slideshow 10s infinite 3.33s;
        }

        .slide:nth-child(3) {
            animation: slideshow 10s infinite 6.66s;
        }

        .slide img {
            width: 50%;
            height: 50%;
            object-fit: contain; /* 使用 contain 进行按比例放大缩小 */
        }

        /*#b_y_div {*/
        /*    position: relative;*/
        /*}*/

        /*#b_y_div {*/
        /*    position: absolute;*/
        /*    top: 50%;*/
        /*    left: 50%;*/
        /*    transform: translate(-50%, -50%);*/
        /*}*/

        #b_div_title {
            padding-top: 100px;
        }

        .slide {
            padding-top: 150px;
        }


        /*    李瑞*/


        /* 王成义   */
        #b_b_div {
            width: 1920px;
            height: 960px;
            /*border: 1px solid red;*/
        }

        #b_b_div_d1 {
            position: absolute; /*绝对定位*/
            top: 38px;
            left: 20px;
        }

        #b_b_div_d2 {
            width: 1208px;
            height: 616px;
            position: absolute; /*绝对定位*/
            top: 220px;
            left: 350px;
        }

        #b_b_div_d2 > img {
            margin-left: 20px;
        }

        #b_b_div_d2 > img {
            transition-duration: 1s
        }

        #b_b_div_d2 > img:hover {
            transform: scale(1.1);
        }

        /*    王明杰*/
        #fixed_1 {
            background-image: url("../bh_img/固定栏背景图.webp");
            width: 252px;
            height: 456px;
            position: fixed;
            right: 0;
            top: 300px;
            z-index: 1;
        }

        #fixed_2 {
            position: relative;
            width: 169px;
            height: 50px;
            z-index: 10;
        }

        #fixed_3 {
            position: relative;
            width: 169px;
            height: 50px;
            z-index: 10;
        }

        #fixed_4 {
            position: relative;

            margin-left: 30px;
            z-index: 10;
        }

        #a1 {
            margin-top: 150px;
            height: 60px;
            width: 220px;
            background-image: url("../bh_img/固定栏进入官网.png");
            border: 1px solid white;
        }

        #a2 {
            margin-top: 30px;
            height: 60px;
            width: 220px;
            background-image: url("../bh_img/固定栏_下载游戏.png");
            border: 1px solid white;
        }

        #a3 {
            margin-top: 50px;
            margin-left: 60px;
            height: 70px;
            width: 70px;
            background-image: url("../bh_img/固定栏上按钮.png");
            border: 1px solid white;
            border-radius: 100px;
        }

        a {
            margin-left: 20px;
            width: 169px;
            height: 50px;
            display: block;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            font-size: 10px;
            border-radius: 55px; /*设置圆角*/
        }

        a:link {
        }

        /*a:visited{color: purple}*/
        a:hover {
            background-color: #9c7de9
        }

        /*a:active{color: purple}*/


        /* 王明杰脚部新加 */
        #footer1 {
            top: 5280px;
            height: 399px;
            width: 1920px;
            background-color: black;
            /*padding: 30px 0 0 20px;*/
            white-space: nowrap;
            position: relative;
            z-index: 10;
        }

        #f1 {
            width: 400px;
            margin-top: 150px;
            margin-left: 200px;
            position: absolute;
            display: inline-block;

        }

        #f_r {
            width: 600px;
            height: 300px;
            /*float: top;*/
            margin-left: 650px;
            position: absolute;
            display: inline-block;
        }

        #f2 {
            width: 1px;
            height: 80px;

            background-color: lightgrey;
            display: inline-block;
        }

        img {
            display: inline-block;
        }

        #f_r>#f_r1>a {
            color: white;
            text-decoration: none;
            display: inline-block;
            font-size: 13px;
            margin:0;
            padding: 0;
            width: 80px;
            height: 30px;
        }
        #f_r>#f_r1>a:hover{
            background-color: #434343;
        }

        #f_r1 {
            margin-top: 30px;
            float: left;
            margin-bottom: 40px;

        }

        #f_r2 {
            float: left;
            margin-bottom: 20px;
        }

        #f_r3 {
            float: left;
            width: 600px;
            height: 132px;
            /*border: black solid 1px;*/
        }

        span {
            color: #c1c1c1;
            font-size: 14px;
        }

        #fr3_1 {
            background-image: url("../bh_img/f_icon1.png")
        }

        #fr3_2 {
            background-image: url("../bh_img/f_icon2.png")
        }

        #fr3_3 {
            background-image: url("../bh_img/f_icon3.png")
        }

        #fr3_4 {
            background-image: url("../bh_img/f_icon4.png")
        }

        #fr3_5 {
            background-image: url("../bh_img/f_icon5.png")
        }

        #fr3_6 {
            background-image: url("../bh_img/f_icon6.png")
        }

        #fr3_7 {
            background-image: url("../bh_img/f_icon7.png")
        }

        #f_r3 > a {
            display: inline-block;
            width: 116px;
            height: 46px;
            margin-right: 15px;
            background-size: 116px 46px;
            margin-bottom: 10px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div>
    <img src="../bh_img/background.png" id="d1">
    <div id="d_id">
        <img src="../bh_img/首页人物图片.webp" id="d2">
        <img src="../bh_img/12+.png" id="d3">
        <img src="../bh_img/bh_logo2.png" id="d4">
        <img src="../bh_img/首页歧路星语.png" id="d5">
        <a href="">
            <button onclick="alert('阿巴阿巴，网页还没有做好哦~')"><img src="../bh_img/首页进入官网.png" id="d6">
            </button>
        </a>
        <a href="">
            <button onclick="alert('阿巴阿巴，网页还没有做好哦~')"><img src="../bh_img/首页下载游戏.png" id="d7">
            </button>
        </a>
        <a href="视频播放.html"><img src="../bh_img/播放按钮.png"  id="d8"></a>
    </div>

    <div id="b_f_div">
        <img id="f_1" src="../bh_img/福利活动框.webp">
        <img id="f_2" src="../bh_img/福利活动头.webp">
        <img id="f_3" src="../bh_img/特别活动商店.png">
        <div>
            <img src="../bh_img/福利活动_1.png">
            <img src="../bh_img/福利活动_2.png">
            <img src="../bh_img/纸月寒绯.webp">
            <img src="../bh_img/绿野青空.webp">
        </div>
    </div>

    <div id="b_q_div">
        <!--        <img src="../bh_img/全新服装标题.png">-->
        <!--        <div id="main">-->
        <!--            <img src="../bh_img/全新服装1.png">-->
        <!--            <img src="../bh_img/全新服装2.png">-->
        <!--            <img src="../bh_img/全新服装3.png">-->
        <!--            <img src="../bh_img/全新服装4.png">-->
        <!--        </div>-->
    </div>

    <div id="b_b_div">
        <img id="b_b_div_d1" src="../bh_img/版本内容标题.png">
        <div id="b_b_div_d2">
            <img id="b_b_div_i1" src="../bh_img/版本内容1.png">
            <img id="b_b_div_i2" src="../bh_img/版本内容2.png">
            <img id="b_b_div_i3" src="../bh_img/版本内容3.png">
        </div>
    </div>

    <div id="b_y_div">
        <img id="b_div_title" src="../bh_img/游戏特色.png" alt="ts">
        <div class="slideshow-container">
            <div class="slide">
                <img src="../bh_img/特色1.webp" alt="Image 1">
            </div>
            <div class="slide">
                <img src="../bh_img/特色2.webp" alt="Image 2">
            </div>
            <div class="slide">
                <img src="../bh_img/特色3.webp" alt="Image 3">
            </div>
        </div>
    </div>

    <div id="fixed_1">
        <div id="fixed_2">
            <a href="" id="a1">

            </a>
        </div>
        <div id="fixed_3">
            <a href="" id="a2">

            </a>
        </div>
        <div id="fixed_4">
            <a href="" id="a3">

            </a>
        </div>
    </div>

    <div id="footer1">
        <div id="f1">
            <img src="../bh_img/mihoyo.png" alt="">
            <div id="f2">
            </div>
            <img src="../bh_img/bh_logo.png" alt="">
        </div>
        <div id="f_r">
            <div id="f_r1">
                <a href="">用户协议 &nbsp &nbsp |</a>
                <a href="">隐私政策 &nbsp &nbsp|</a>
                <a href="">儿童隐私政策 |&nbsp</a>
                <a href="">&nbsp &nbsp 自律公约 &nbsp| &nbsp</a>
                <a href="">成长关爱 &nbsp &nbsp|</a>
                <a href="">关于我们 &nbsp &nbsp|</a>
                <a href="">联系我们 &nbsp |</a>
                <a href="">加入我们  </a>
            </div>
            <div id="f_r2">
                <span>健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</span><br>
                <span>适龄提示:本游戏适合12岁以上玩家娱乐│沪公网安备31010402001113号│增值电信业务经营许可证:沪B2-20190555</span><br>
                <span>沪ICP备19018275号-4沪网文〔2022]1334-052号│文网游备字〔2016] M-CSG 1244号│新广出审【2016]961号</span><br>
                <span>互联网违法不良信息举报邮箱: tousu@service.mihoyo.com互联网违法不良信息举报电话:021-60371750(工作时间:每天10点-20点)</span><br>
                <span>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您—旦收到来电，立即接听</span><br>
                <span>未成年成长关爱热线:021-60371740(服务时间:8:00-23:00)</span><br>
                <span> 2016米哈游版权所有|上海米哈游影铁科技有限公司&nbsp客服电话:400-666-6312</span>
            </div>

            <div id="f_r3">
                <a id="fr3_1" href=""></a>
                <a id="fr3_2" href=""></a>
                <a id="fr3_3" href=""></a>
                <a id="fr3_4" href=""></a>
                <a id="fr3_5" href=""></a>
                <a id="fr3_6" href=""></a><br>
                <a id="fr3_7" href=""></a>
            </div>
        </div>
    </div>
</div>
</body>
</html>